<template>
<div>
  <div class="titlename">
    <div class="fonttitle">{{detailTitle}}类型：
        <Select style="width:150px" @on-select="selectdetailtype" ref='typeSelect' clearable>
            <Option value="1" key="1">个人</Option>
            <Option value="2" key="2">公司</Option>
        </Select>
    </div>
    <div class="btnRight"><span class="btn" @click="addInfo">添加{{detailTitle}}</span></div>
  </div>
    
  <div v-for="(ivs,index) in basicInfos" :key="index">
        <!-- 个人 -->
        <div class="simple" v-if="ivs&&ivs.detailtype==1">
          <div class="del" @click="delinfo(index)">删除</div>
          <div class="PeoInfo">
              <div class="detailJusfy">
                <Form label-position="left" :label-width="120" class="viewform">
                  <FormItem label="姓名">
                      <Input v-model="ivs&&ivs.name"/>
                  </FormItem>
                  <FormItem label="联系方式">
                      <Input v-model="ivs&&ivs.contact"/>
                  </FormItem>
                </Form>
              </div>
              <div class="detailJusfy">
                <Form label-position="left" :label-width="120" class="viewform">
                  <FormItem label="身份证号">
                      <Input v-model="ivs&&ivs.idCard" style="width:310px"/>
                  </FormItem>
                  <FormItem label="地址">
                      <!-- <Input v-model="ivs&&ivs.address"/> -->
                      <Select filterable v-model="ivs&&ivs.province" @on-select="openfilterchange"
                              style="width:90px" @on-change="filterCity(ivs,ivs.province)">
                          <Option v-for="item in provinceList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                      </Select>
                      <Select filterable v-model="ivs&&ivs.city" 
                              style="width:100px;margin-left:10px;" @on-select="openfilterchange"
                              @on-change="filterArea(ivs,ivs.city)">
                          <Option v-for="item in ivs.cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                      </Select>
                      <Select filterable v-model="ivs&&ivs.areaname" style="width:100px;margin-left:10px;">
                          <Option v-for="item in ivs.areaList" :value="item.label" :key="item.value">{{ item.label }}</Option>
                      </Select>
                      <Input v-model="ivs&&ivs.street" style="width:300px;margin-left:10px;"/>
                  </FormItem>
                </Form>
              </div>
              <div class="detailJusfy">
                <Form label-position="left" :label-width="120" class="viewform">
                  <FormItem label="邮箱">
                      <Input v-model="ivs&&ivs.email"/>
                  </FormItem>
                  <FormItem label="有无代理人">
                      <Select v-model="ivs&&ivs.isproxy" @on-change="islaw(index)" @on-select="openchange">
                          <Option value="1" key="1" label="有">有</Option>
                          <Option value="2" key="2" label="无">无</Option>
                      </Select>
                  </FormItem>
                </Form>
              </div>
          </div>
          <!-- 律师事务所全称 -->
          <div class="lawinfo" v-show="lawinfo==index||ivs.isproxy=='1'">
              <div class="detailJusfy">
                <Form label-position="left" :label-width="120" class="viewform">
                  <FormItem label="律师事务所全称">
                      <Input v-model="ivs&&ivs.proxy.proxyName"/>
                  </FormItem>
                  <FormItem label="邮箱">
                      <Input v-model="ivs&&ivs.proxy.proxyEmail"/>
                  </FormItem>
                </Form>
              </div>
              <div class="detailJusfy">
                <Form label-position="left" :label-width="120" class="viewform">
                  <FormItem label="电话">
                      <Input v-model="ivs&&ivs.proxy.proxyNumber" style="width:310px"/>
                  </FormItem>
                  <FormItem label="住所地">
                      <Select filterable v-model="ivs&&ivs.proxy.province" @on-select="openfilterchange"
                              style="width:90px" @on-change="filterCity(ivs,ivs.proxy.province,'proxy')">
                          <Option v-for="item in provinceList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                      </Select>
                      <Select filterable v-model="ivs&&ivs.proxy.city" 
                              style="width:100px;margin-left:10px;" @on-select="openfilterchange"
                              @on-change="filterArea(ivs,ivs.proxy.city,'proxy')">
                          <Option v-for="item in ivs.proxy.cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                      </Select>
                      <Select filterable v-model="ivs&&ivs.proxy.areaname" style="width:100px;margin-left:10px;">
                          <Option v-for="item in ivs.proxy.areaList" :value="item.label" :key="item.value">{{ item.label }}</Option>
                      </Select>
                      <Input v-model="ivs&&ivs.proxy.street" style="width:300px;margin-left:10px;"/>
                  </FormItem>
                  
                </Form>
              </div>
              <div class="detailJusfy">
                <Form label-position="left" :label-width="120" class="viewform">
                  <FormItem label="承办律师姓名">
                      <Input v-model="ivs&&ivs.proxy.lawyerName"/>
                  </FormItem>
                </Form>
              </div>
          </div>
        </div>
        <div class="company" v-if="ivs&&ivs.detailtype==2">
          <div class="del" @click="delinfo(index)">删除</div>
          <div class="PeoInfo">
              <div class="detailJusfy">
                <Form label-position="left" :label-width="120" class="viewform">
                  <FormItem label="公司全称">
                      <Input v-model="ivs&&ivs.companyName"/>
                  </FormItem>
                  <FormItem label="联系方式">
                      <Input v-model="ivs&&ivs.contactNumber"/>
                  </FormItem>
                  <FormItem label="邮箱">
                      <Input v-model="ivs&&ivs.companyEmail"/>
                  </FormItem>
                </Form>
              </div>
              <div class="detailJusfy">
                <Form label-position="left" :label-width="120" class="viewform">
                  <FormItem label="法人代表人">
                      <Input v-model="ivs&&ivs.legalName" style="width:310px"/>
                  </FormItem>
                  <FormItem label="机构代码">
                      <Input v-model="ivs&&ivs.orgCode" style="width:310px"/>
                  </FormItem>
                  <FormItem label="住所地">
                      <!-- <Input v-model="ivs&&ivs.companyAddress"/> -->
                      <Select filterable v-model="ivs&&ivs.province" @on-select="openfilterchange"
                              style="width:90px" @on-change="filterCity(ivs,ivs.province)">
                          <Option v-for="item in provinceList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                      </Select>
                      <Select filterable v-model="ivs&&ivs.city" 
                              style="width:100px;margin-left:10px;" @on-select="openfilterchange"
                              @on-change="filterArea(ivs,ivs.city)">
                          <Option v-for="item in ivs.cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                      </Select>
                      <Select filterable v-model="ivs&&ivs.areaname" style="width:100px;margin-left:10px;">
                          <Option v-for="item in ivs.areaList" :value="item.label" :key="item.value">{{ item.label }}</Option>
                      </Select>
                      <Input v-model="ivs&&ivs.street" style="width:300px;margin-left:10px;"/>
                  </FormItem>
                </Form>
              </div>
              <div class="detailJusfy">
                <Form label-position="left" :label-width="120" class="viewform">
                  <FormItem label="职务">
                      <Input v-model="ivs&&ivs.legalPosition"/>
                  </FormItem>
                  <FormItem label="联系人">
                      <Input v-model="ivs&&ivs.contactName" />
                  </FormItem>
                  <FormItem label="有无代理人">
                      <Select v-model="ivs&&ivs.isproxy" @on-change="islaw(index)" @on-select="openchange">
                          <Option value="1" key="1">有</Option>
                          <Option value="2" key="2">无</Option>
                      </Select>
                  </FormItem>
                </Form>
              </div>
          </div>
          <!-- 律师事务所全称 -->
          <div class="lawinfo" v-show="lawinfo==index||ivs.isproxy=='1'">
              <div class="detailJusfy">
                <Form label-position="left" :label-width="120" class="viewform">
                  <FormItem label="律师事务所全称">
                      <Input v-model="ivs&&ivs.proxy.proxyName"/>
                  </FormItem>
                  <FormItem label="邮箱">
                      <Input v-model="ivs&&ivs.proxy.proxyEmail"/>
                  </FormItem>
                </Form>
              </div>
              <div class="detailJusfy">
                <Form label-position="left" :label-width="120" class="viewform">
                  <FormItem label="电话">
                      <Input v-model="ivs&&ivs.proxy.proxyNumber" style="width:310px"/>
                  </FormItem>
                  <FormItem label="住所地">
                      <!-- <Input v-model="ivs&&ivs.proxy.proxyAddress"/> -->
                      <Select filterable v-model="ivs&&ivs.proxy.province" @on-select="openfilterchange"
                              style="width:90px" @on-change="filterCity(ivs,ivs.proxy.province,'proxy')">
                          <Option v-for="item in provinceList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                      </Select>
                      <Select filterable v-model="ivs&&ivs.proxy.city" 
                              style="width:100px;margin-left:10px;" @on-select="openfilterchange"
                              @on-change="filterArea(ivs,ivs.proxy.city,'proxy')">
                          <Option v-for="item in ivs.proxy.cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                      </Select>
                      <Select filterable v-model="ivs&&ivs.proxy.areaname" style="width:100px;margin-left:10px;">
                          <Option v-for="item in ivs.proxy.areaList" :value="item.label" :key="item.value">{{ item.label }}</Option>
                      </Select>
                      <Input v-model="ivs&&ivs.proxy.street" style="width:300px;margin-left:10px;"/>
                  </FormItem>
                  
                </Form>
              </div>
              <div class="detailJusfy">
                <Form label-position="left" :label-width="120" class="viewform">
                  <FormItem label="承办律师姓名">
                      <Input v-model="ivs&&ivs.proxy.lawyerName"/>
                  </FormItem>
                </Form>
              </div>
          </div>
          
        </div>
  </div>
  </div>
</template>

<script>
export default {
  name: 'DetailIndex',
  data(){
    return {
       basicInfo:{},
       proxyPeo:'2',
       basicInfos:[],
       lawinfo:'',
       detailtype:'',
       addrname:''
    }
  },
  props: ['caseNo','detailTitle','emptyINfo','provinceList'],
  computed:{
    emptystatus:function(){
      return this.emptyINfo
    }
  },
  watch:{
    emptystatus:function(){
      this.basicInfos=[];
      this.$refs['typeSelect'].clearSingleSelect();
      this.detailtype='';
    }
  },
  methods:{
    openfilterchange(param){
       this.addrname=param.label;
    },
    filterCity(param,param2,param3){
       if(param2){
          this.$http.get('/api2'+this.urls.getCity+'/'+param2).then((result)=>{
            if(result.data.length>0){
            
                if(param3=='proxy'){
                    param.proxy.cityList=result.data;
                    param.proxy.areaList=[];
                    param.proxy.cityname='';
                    param.proxy.areaname='';
                    param.proxy.privincename=this.addrname;
                }else{
                    param.cityList=result.data;
                    param.areaList=[];
                    param.cityname='';
                    param.areaname='';
                    param.privincename=this.addrname;
                }
            }else{
              this.$Message.warning('网络错误');
            }
          })
       }
        

    },
    filterArea(param,param2,param3){
      if(param2){
          this.$http.get('/api2'+this.urls.getArea+'/'+param2).then((result)=>{
            if(result.data.length>0){
              
                if(param3=='proxy'){
                    param.proxy.areaList=result.data;
                    param.proxy.cityname=this.addrname;
                }else{
                    param.areaList=result.data;
                    param.cityname=this.addrname;
                }
            }else{
              this.$Message.warning('网络错误');
            }
          })
      }
      
    },
    addInfo(){
      if(this.detailtype=='1'){
          this.basicInfos.push({detailtype:'1',isproxy:'1',
              name:'',contact:'',idCard:'',email:'',address:'',cityList:[],areaList:[],
              privincename:'',cityname:'',areaname:'',street:'',
              proxy:{proxyName:'',proxyAddress:'',proxyNumber:'',
                    privincename:'',cityname:'',areaname:'',street:'',
                    cityList:[],areaList:[],proxyEmail:'',lawyerName:''}});
      }else if(this.detailtype=='2'){
          this.basicInfos.push({detailtype:'2',isproxy:'1',cityList:[],areaList:[],
              companyName:'',companyAddress:'',legalName:'',legalPosition:'',orgCode:'',
              privincename:'',cityname:'',areaname:'',street:'',
              contactName:'',companyEmail:'',contactNumber:'',
              proxy:{proxyName:'',proxyAddress:'',cityList:[],areaList:[],
                    privincename:'',cityname:'',areaname:'',street:'',
                    proxyNumber:'',proxyEmail:'',lawyerName:''}});
      }else{
        this.$Message.warning('请先选择类型');
      }
    },
    delinfo(param1){
      this.basicInfos=this.basicInfos.filter((item,param)=>{
         return param1!=param
      });
    },
    selectdetailtype(param){
      if(this.provinceList.length>0&&this.provinceList[0]){
         this.detailtype=param.value
      }else{
        this.$Message.warning('网络错误');
      }
    },
    islaw(param){
      if(this.proxyPeo=='1'){
        this.lawinfo=param
      }else{
        this.lawinfo=Math.random()
      }      
    },
    openchange(param){
      this.proxyPeo=param.value
    },
    dataSave(){
      return this.basicInfos;
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .fonttitle{
    font-size: 16px;
  }
  
  .titlename{
    padding: 22px 24px 0 24px;
  }

  .simple{
    padding: 0 24px 0 24px;
    border-top: 2px dashed;
    margin-top: 16px;
  }
  
  .PeoInfo{
    display: grid;
    grid-template-columns: 22% 46% 33%;
    clear: both;
    /* border-bottom: 2px solid #e6e6e6; */
  }
  .lawinfo{
    display: grid;
    grid-template-columns: 22% 46% 33%;
    border-top: 1px dashed;
  }
  .company{
    padding: 0 24px 0 24px;
    border-top: 2px dashed;
    margin-top: 16px;
  }
  .btn{
    background: #2e37cb;
    color: #fff;
    line-height: 30px;
    width: 120px;
    height: 30px;
    display: inline-block;
    margin-left: 50px;
    text-align: center;
    cursor: pointer;
  }
  .btn-apply{
    background: #1aa864;
  }
  .filterCon{
    margin: 20px;
  }
  .applyTime{
    margin: 0 40px;
  }
  .del{
    width: 40px;
    float: right;
    background: #f5d5d5;
    color:#cb2e2e;
    text-align: center;
    margin-top: 10px;
    cursor: pointer;
  }
</style>
